<template>
	<view>
		<nav-bar title="充电订单"></nav-bar>
		<loading-page :loading="loading"></loading-page>
		<view v-if="!loading">
			<view v-if="!showEmpty" :style="{'margin-top':(navHeight+15)+'px'}">
				<view v-for="(item,index) in chargingOrderList" v-if="header">
					<charging-cell @click.native="charging_Click(item)" :data="item" class="card"></charging-cell>
				</view>
				<view class="title">充电记录</view>
				<view v-for="(item,index) in orderList">
					<charge-done-cell @click.native="chargDone_Click(item)" :data="item"></charge-done-cell>
				</view>
			</view>
			<u-empty :show="showEmpty" :marginTop="emptyTop">
			</u-empty>
		</view>
	</view>
</template>

<script>
	var globalData = getApp({
		allowDefault: true
	}).globalData
	import navBar from '../components/navBar.vue'
	import chargingCell from '../components/chargeingCell.vue'
	import chargeDoneCell from '../components/chargeDoneCell.vue'
	import loadingPage from './@/components/loadingPage.vue'
	import * as orderApi from '../../api/order/index.js'
	import {paging} from '@/mixins/paging.js'
	export default{
		mixins:[paging],
		components:{navBar,chargingCell,chargeDoneCell,loadingPage},
		data(){
			return{
				navHeight:0,
				loading:true,
				showEmpty:false,
				header:false,
				orderList:[],
				emptyTop:0,
				chargingOrderList:[]
			}
		},
		onLoad() {
			this.navHeight = globalData.titleHeight;
			this.emptyTop=globalData.windowHeight/2.0-60;
			this.getMyOrderList();
		},
		onShow() {
			this.getMyOrderList();
		},
		methods:{
			getMyOrderList(){
				orderApi.getMyOrderList(0).then((res)=>{
					this.loading=false;
					this.orderList = res.data.orderList
					this.chargingOrderList = res.data.chargingOrderList
					this.header=this.chargingOrderList.length>0?true:false
					this.showEmpty=(this.orderList.length==0&&this.chargingOrderList.length==0)?true:false;
				}).catch((errorMsg)=>{
					this.loading=false;
					uni.showToast({
						title:errorMsg,
						icon:'none'
					})
				})
			},
			charging_Click(item){
				uni.navigateTo({
					url:'/pages/order/chargingDetail?orderNumber=' + item.orderNumber+'&from=orderList' + '&deviceType=' + item.orderType
				})
			},
			chargDone_Click(item){
				uni.navigateTo({
					url:'/pages/order/chargeDoneDetail?orderNumber=' + item.orderNumber+'&from=orderList' +  '&deviceType=' + item.orderType
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card{
		background: #FFFFFF;
		box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.06);
		border-radius: 9px;
		margin-left:30rpx;
		margin-right:30rpx;
		overflow: hidden;
		margin-bottom:30rpx;
	}
	.title{
		color:#333333;
		font-size:24rpx;
		margin-left:24rpx;
		margin-bottom:18rpx;
	}
</style>
